// let header = require('./header');
// 把header.js 这个模块导入到list.js
import header from "./header.js";
import renderNav from "./renderNav.js";

let headerCon = document.querySelector(".header .container");
headerCon.innerHTML = header();

// 浏览器打开的时候 先把本地存储中的数据先删掉
localStorage.clear();

/* 
    需要设置导航 而且多次需要用到导航的数据
    先获取导航的数据 然后把数存在本地存储
    当你需要用到这个数据的时候 把数据从本地存储中获取出来在是使用
*/
// 获取所需要的元素
let submenu = document.querySelector(".submenu div");
let nav_list = document.querySelector(".nav_list");
let nav_sub = document.querySelector(".nav1_sub"); //子类的容器
let nav_sub_list = nav_sub.querySelector(".nav_list");

let list_content = document.querySelector(".list_content");
let page = document.querySelector(".pagenation");

// 分页的功能
// 打开浏览器设置分页
renderPage(page);

// 设置分页的函数
function renderPage(page) {
    page.innerHTML = "";
    new Pagination(page, {
        pageInfo: {
            pagenum: 1, // 默认显示第一几页
            pagesize: 20, // 每一页多少条数据
            total: 1000, // 总共有多少条数据
            totalpage: 100, // 总共有多少页
        },
        textInfo: {
            first: "首页",
            prev: "上一页",
            next: "下一页",
            last: "末尾",
        },
        change: change,
    });
}

// 点击分页的时候执行的函数
function change(idx) {
    let category = localStorage.getItem("category");
    let sub_category = localStorage.getItem("sub_category");

    // 请求数据的参数的处理
    let str = `${category ? "category=" + category : ""}&${
        sub_category ? "sub_category=" + sub_category : ""
    }&limit=20&page=${idx}`;

    getListData(str);
    scrollTo({ top: 0, behavior: "smooth" });
}

// 获取导航数据
getNav();
async function getNav() {
    let res = await pAjax({
        url: "../data/nav.json",
    });
    // 把数据存在本地存储中
    localStorage.setItem("navData", res);

    // 渲染分类
    // renderNav(JSON.parse(res));
    let data = JSON.parse(res);
    
    submenu.innerHTML = renderNav(data);
    nav_list.innerHTML = renderNav(data);
    renderSubNav(data[0].sub);
}


// 渲染子类函数
function renderSubNav(sub_data) {
    // 如果sub_data 是空数组时候  把nav_sub 隐藏
    // 如果有数据的时候 显示 nav_sub 并且根据数据渲染生成a标签的结构显示nav_sub_list
    if (sub_data.length == 0) {
        nav_sub.style.display = "none";

        return;
    }
    nav_sub.style.display = "block";

    nav_sub_list.innerHTML = sub_data
        .map((item) => {
            return `<a sub_category="${item.sub_category}" class="item">${item.name}</a>`;
        })
        .join("");
}

// 给每分类的父元素利用事件委托的形式绑定点击
nav_list.onclick = function (e) {
    if (e.target.classList.contains("item")) {
        // console.log(1);
        // 点击这个元素添加active类名 其他的元素移出active名
        // 获取点击这个元素的子类 并且把子类传递 renderSubNav()
        // 列表的数据根据点击的元素 来获取数据渲染结果

        // nav_list.querySelector('.active) 找到nav_list 下面有active的元素
        nav_list.querySelector(".active").classList.remove("active");

        // e.tartet 就是当前点击这个的元素
        e.target.classList.add("active");

        // 点击的时候 重新渲染分页，每次点击让分页始终保持在第一页
        renderPage(page);

        // 去所有的数据中过滤出来我点击的这条元素
        // 先获取所有
        let data = JSON.parse(localStorage.getItem("navData"));

        let category = e.target.getAttribute("category");
        // 如果点击的时候全部
        if (!category) {
            getListData();
            // 并且把本地存储中分类和子类都删除
            localStorage.removeItem("category");
            localStorage.removeItem("sub_category");
            return;
        }

        // 可以把分类存在本地存储里面
        localStorage.setItem("category", category);

        // 根据category 去data中过滤对应的数据出来
        let res = data.filter((item) => {
            return item.category == category;
        });
        // res以数组的形式满足条件的数据 过滤出来

        // console.log(res[0].sub); 解析数据拿到对应这条数据的子类
        renderSubNav(res[0].sub);

        // 点击分类的时候 获取分类的数据 把对应的数据渲染到结构
        // 分类的数据 参数：category=graphic_design
        getListData({ category: category });
    }
};

// 给每一个子类绑定点击事件（利用子类父元素的事件委托的形式）
nav_sub_list.onclick = function (e) {
    if (e.target.classList.contains("item")) {
        // 给当前点击的元素设置高亮 其他元素没有高亮
        let active = nav_sub_list.querySelector(".active");

        // 先获取有active类名的元素
        // 如果元素存在 那么就把这个元素的active移出 如果不存在说明一个高亮的元素都没有 直接给当前点击的元素添加active
        active && active.classList.remove("active");

        // 直接给当前点击的元素添加active
        e.target.classList.add("active");

        // category=logo_brand&sub_category=business_card_brand
        let category = localStorage.getItem("category");
        let sub_category = e.target.getAttribute("sub_category");

        // 点击子类的时候 把子类的关键字也存储到本地存储中
        // 分页的时候 需要用到分类 和子类的关键字
        localStorage.setItem("sub_category", sub_category);

        renderPage(page);
        getListData({ category: category, sub_category: sub_category });
    }
};

/* 
    ajax请求获取列表的数据
*/

getListData();

async function getListData(option) {
    let res = await pAjax({
        url: "https://muse.huaban.com/api/v1/services/",
        data: option,
    });

    let data = JSON.parse(res);
    renderList(data);
}

function renderList(data) {
    // 渲染列表的结构
    let str = data
        .map((item) => {
            return `<div class="item">
            <img
                src="https://muse-img.huabanimg.com/${
                    item.cover[0].key
                }_/both/280x280"
                alt=""
            />
            <label class="title">${item.name}</label>
            <footer class="extra">
                <label class="price">
                    ${
                        item.price == 0
                            ? "价格面议"
                            : "￥" +
                              item.price +
                              "<small>/" +
                              item.unit +
                              "</small>"
                    }   
                </label>
                <p class="tip">${item.extra.urgent ? "提供加急服务" : ""} ${
                item.extra.sub_services.length != 0 ? "提供可拓展服务" : ""
            } </p>
            </footer>
        </div>`;
            /* 
            当数据中 extra 这对象中有 urgent 表示这个数据是可加急服务
            当数据中 extra 对象 中这个属性sub_services有数据的时候 表示可拓展服务
        */
        })
        .join("");
    list_content.innerHTML = str;
}

// 分页的功能
// pagination
/* 
    new Pagination(存放分页的元素, {
        pageInfo: {
            pagenum: 1, // 默认显示第一几页
            pagesize: 20, // 每一页多少条数据
            total: 1000, // 总共有多少条数据
            totalpage: 50, // 总共有多少页
        },
        textInfo: {
            first: "首页",
            prev: "上一页",
            next: "下一页",
            last: "末尾",
        },
        change(){
            当点击每一个页的时候就会执行这个函数
        }
    })
*/

// console.log(a.default.pageInfo.pagenum);
